<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="funA">调用a方法</button>
			<hr />
			<input v-model="name" />
			<input v-model="age" />
			<button @click="funB">调用b方法</button>
			<hr />
			<input v-model="name" />
			<input v-model="age" />
			<button @click="funC">调用c方法</button>
			<hr />
			<input v-model="name" />
			<input v-model="age" />
			<button @click="funD">调用d方法</button>
			<hr />
			<button @click="funE">调用e方法</button>
		</div>
	</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				name: '',
				age: ''
			}
		},
		methods: {
			funA() {
				axios({
					method: "get",
					url: "http://localhost:8001/fifth"
				}).then(resp => {
					console.log(resp.data)
				})
			},
			funB() {
				let data = new URLSearchParams()
				data.append('name', this.name)
				data.append('age', this.age)
				axios({
					method: 'post',
					url: "http://localhost:8001/fifth",
					data: data
				}).then(resp => {
					console.log(resp.data)
				})
			},
			funC() {
				let data = new URLSearchParams()
				data.append('name', this.name)
				data.append('age', this.age)
				axios({
					method: 'put',
					url: "http://localhost:8001/fifth/d",
					data: data
				}).then(resp => {
					console.log(resp.data)
				})
			},
			funD() {
				axios({
					method: 'delete',
					url: "http://localhost:8001/fifth/e",
					params: {
						name: this.name,
						age: this.age
					}
				}).then(resp => {
					console.log(resp.data)
				})
			},
			funE(){
				axios({
					method:'get',
					url:'http://localhost:8001/seventh',
					headers:{
						token:'egrdjksgu21ekjdsfksggfjkv'
					}
				}).then(resp=>{
					console.log(resp.data)
				})
			}
		}
	})
</script>